<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>读书</title>
    <link rel="stylesheet" href="public/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <style>
        #app {
            width: 600px;
            margin: 100px auto;
        }
        .left{
            width:60%;
        }
        .operation{
            margin: 20px auto;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>记忆背书</h1>

    <p>隔一个字，屏蔽一个，让大脑充分的活动起来，去记忆</p>

    <p>用Vue.js的数据双向绑定来实现,UI使用的ElementUI实现</p>

    <hr>
    <el-input
            type="textarea"
            :row="8"
            placeholder="请输入文章"
            v-model="content">
    </el-input>

    <div class="operation">
        <el-input v-model="splitor" class=".pull-left left" v-on:blur="ace">
            <template slot="prepend">请输入分隔符</template>
        </el-input>
        <!--<el-button type="primary" @click="ace" class=".pull-right">生成</el-button>-->
    </div>

    <el-tabs type="border-card">
        <el-tab-pane label="间隔一" tab-index="2">{{result}}</el-tab-pane>
        <el-tab-pane label="原文" @click="ace">{{content}}</el-tab-pane>
    </el-tabs>
</div>
</body>
<!-- 引入组件库 -->
<script src="public/libs/vue.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    var patt = new RegExp("[a-zA-z0-9\u4E00-\u9FA5]");
    var app = new Vue({
        el: '#app',
        data: {
            content: '道可道，非常道。名可名，非常名。无名天地之始。有名万物之母。故常无欲以观其妙。常有欲以观其徼。此两者同出而异名，同谓之玄。玄之又玄，众妙之门。',
            splitor: 'O',
            result: ''
        },
        mounted: function () {
            this.$nextTick(function () {
                this.ace();
            })
        },
        methods: {
            ace(){
                this.result = '';
                let arr = this.content.split("");
                let arrLength = arr.length;
                flag = false;
                for (i = 0; i < arrLength; i += 1) {
                    if (!patt.test(arr[i])) {
                        this.result += arr[i];
                        continue;
                    }
                    if (flag) {
                        this.result += (arr[i]);
                    } else {
                        this.result += (this.splitor);
                    }
                    flag = !flag;
                }
            }
        }

    })

</script>
</html>